<!DOCTYPE html>
<html>
<head th:include="include :: header"></head>
<body>

	Welcome
	<br />
	<input id="text" type="text" />
	<button onclick="send()">发送消息</button>
	<hr />
	<button onclick="closeWebSocket()">关闭WebSocket连接</button>
	<hr />
	<hr />
	<button onclick="openWebSocket()">打开WebSocket连接</button>
	<hr />
	<div id="message"></div>
</body>

<script type="text/javascript">
    var websocket = null;
    var wsUrl = 'ws://192.168.0.26:8089/hessian/websocket/1';
    //判断当前浏览器是否支持WebSocket
    reconnect(wsUrl);  
    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
    }
 
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }
 
    //关闭WebSocket连接
    function closeWebSocket() {
        websocket.close();
    } 
    
    var heartCheck = {
    	timeout: 3595000,//60ms
    	//timeout: 1000,//60ms
   	    timeoutObj: null,
   	    reset: function(){
   	        clearTimeout(this.timeoutObj);
   	　　　　 	return this;
   	    },
   	    start: function(){
   	    	var self = this;
   	        this.timeoutObj = setTimeout(function(){websocket.send("HEART_BEAT");},this.timeout)
   	    }
   	} 
    //发送消息
    function send() {
        var message = document.getElementById('text').value;
        if(!message){
        	alert("发送信息不能为空",3000)
        	return false;
        } 
        websocket.send(message);
    }
    
    
 	// 重连
    function reconnect(url) {
	    if (reconnect.lockReconnect) return;
	    reconnect.lockReconnect = true;
	    setTimeout(function () {     //没连接上会一直重连，设置延迟避免请求过多
	        createWebSocket(url);
	        reconnect.lockReconnect = false;
	    }, 2000);
	}

    // 实例websocket
    function createWebSocket(url) {
        try {
            if ('WebSocket' in window) {
            	websocket = new WebSocket(url);
            } else if ('MozWebSocket' in window) {
            	websocket = new MozWebSocket(url);
            } else {
                alert("当前浏览器不支持websocket协议,建议使用现代浏览器",3000)
            }
            initEventHandle();
        } catch (e) {
            reconnect(url);
        }
    }

    // 初始化事件函数
    function initEventHandle() {
    	websocket.onclose = function(){
    		setMessageInnerHTML("WebSocket连接关闭,进行重连");
    	    reconnect(wsUrl);
    	    
   	    };
   	 	websocket.onerror = function (err) {
   	 		setMessageInnerHTML("WebSocket连接发生错误");
   	        reconnect(wsUrl);
   	    };
   	 	websocket.onopen = function () {
	   	 	heartCheck.reset().start();
	        setMessageInnerHTML("WebSocket连接成功");
   	    };
   	 	websocket.onmessage = function (msg) {    //如果获取到消息，心跳检测重置
   	        if(!msg){
   	        	websocket.close();
   	        }else{
   	        	heartCheck.reset().start();      //拿到任何消息都说明当前连接是正常的
   	   	      	setMessageInnerHTML(msg.data);
   	        } 
   	    };
    }
    
</script>


</body>
</html>